<template>
    <el-card class="foot-button" body-style="padding:0px;height: auto;overflow-y: hidden">
        <div style="margin-top: 5px;margin-left: 5px;font-size: 22px">
            <el-button v-if="$route.name === 'home'" class="item-button" :color="buttonColor" icon="el-icon-upload" size="large" circle @click="uploadTxt"></el-button>
            <el-button v-if="$route.name === 'home'" class="item-button" :color="buttonColor" icon="el-icon-download" size="large" circle @click="exportJSON"></el-button>
            <el-button v-if="$route.name === 'home'" class="item-button" :color="buttonColor" icon="el-icon-setting" size="large" circle @click="openSetting"></el-button>
            <el-button v-if="$route.name === 'setting'" class="item-button" :color="buttonColor" icon="el-icon-house" size="large" circle @click="home"></el-button>
            <el-button style="border-radius: 50%" class="item-button" :color="buttonColor" size="large" circle @click="clickScreenFull"><screen-full ref="screenRef"></screen-full></el-button>
        </div>
        <div class="foot-button-1">
            <el-icon :size='22' color="#ffffff">
                <component is="el-icon-more"/>
            </el-icon>
        </div>
        <input type="file" ref="upload" accept=".json" class="file" @change="getTxtList" v-show="false"/>
    </el-card>
</template>

<script>
import FileSaver from 'file-saver'
import {getCurrentInstance, watch} from 'vue'
import {mapState} from "vuex";
import ScreenFull from '../components/Screenfull/index.vue'

export default {
    name: "operationButton",
    props: {
        model: Array
    },
    components:{ScreenFull},
    computed:{
      ...mapState(['buttonColor'])
    },
    setup(props, {emit}) {
        let array = props.model
        watch(() => props.model, (newVal) => {
            array = newVal
        }, {immediate: true, deep: true})
        // 导出JSON
        const exportJSON = () => {
            // array = props.model
            // 将json转换成字符串
            // let newObject = {
            //     formItem: array
            // }
            const data = JSON.stringify(array)
            const blob = new Blob([data], {type: ''})
            FileSaver.saveAs(blob, 'ElementForm.json')
        }

        // 上传txt文件并解析
        const {proxy} = getCurrentInstance()
        const getTxtList = (event) => {
            let fileSelect = event.target.files[0]//找到文件上传的元素
            let reader = new FileReader()
            if (typeof FileReader === 'undefined') {
                this.$message.error('您的浏览器不支持FileReader接口')
                return
            }
            reader.readAsText(fileSelect, ['gb2312', 'utf-8'])
            reader.onload = function () {
                console.log(JSON.parse(reader.result), "reader.result");  //文件内容
                emit('Import', JSON.parse(reader.result))
                // upload.value = null;   //要及时清除掉上传的文件  防止第二次上传同文件无反应
                proxy.$refs.upload.value = null
            }
        }

        const clickScreenFull = (event) => {
            proxy.$refs.screenRef.click()
            // console.log(proxy.$refs.screenRef)
        }
        return {exportJSON, getTxtList, clickScreenFull}
    },
    data() {
        return {
            form: this.model
        }
    },
    methods: {
        // 上传json文件
        uploadTxt() {
            this.$refs.upload.click()
        },
        openSetting(){
            this.$router.push('/setting')
        },
        home(){
            this.$router.push('/home')
        },
    }
}
</script>

<style lang="scss" scoped>

.foot-button {
    position: absolute;
    bottom: 10px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 30px;
}

.foot-button-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    border-radius: 50%;
    -webkit-transition:-webkit-transform .3s linear;
    transition:transform .3s linear;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}
.foot-button:hover .foot-button-1{
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
.foot-button:hover {
    width: 220px;
    display: block;
    -webkit-transition: width .5s;
}
.item-button{
    display: none;
    color: white;
}
.foot-button:hover .item-button{
    display: inline;
}
</style>
